<template>
  <el-main>
    <!--  查询条件-->
    <el-form :model="searchModel" ref="searchForm" label-width="80px" :inline="true" size="small">
      <el-form-item>
        <el-input v-model="searchModel.roleName" placeholder="请输入角色名称"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="search(pageNo,pageSize)">查询</el-button>
        <el-button icon="el-icon-refresh-right" @click="resetValue">重置</el-button>
        <el-button type="success" icon="el-icon-plus" @click="openAddWindow()" v-if="hasPermission('sys:role:add')">新增</el-button>
      </el-form-item>
    </el-form>
    <!--    数据表格-->
    <el-table :data="roleList" :height="tableHeight" border stripe style="width: 100%;margin-bottom: 10px">
      <el-table-column prop="id" label="角色编号" width="100" align="center"/>
      <el-table-column prop="roleCode" label="角色编码"/>
      <el-table-column prop="roleName" label="角色名称"/>
      <el-table-column prop="remark" label="角色备注"/>
      <el-table-column label="操作" align="center" width="290">
        <template slot-scope="scope">
          <el-button icon="el-icon-edit" type="primary" size="mini" @click="handleEdit(scope.row)" v-if="hasPermission('sys:role:edit')" >编辑</el-button>
          <el-button icon="el-icon-delete" type="danger" size="mini" @click="handleDelete(scope.row)" v-if="hasPermission('sys:role:delete')">删除</el-button>
          <el-button icon="el-icon-setting" type="primary" size="mini" @click="assignRole(scope.row)" v-if="hasPermission('sys:role:assign')">分配权限
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--    分页工具-->
    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                   :current-page="pageNo" :page-sizes="[10,20,30,40,50]" :page-size="10"
                   layout="total,sizes,prev,pager,next,jumper" :total="total">
    </el-pagination>
    <!--    添加和修改角色窗口-->
    <system-dialog :title="roleDialog.title" :visible="roleDialog.visible" :width="roleDialog.width"
                   :height="roleDialog.height" @onClose="onClose()" @onConfirm="onConfirm()">
      <div slot="content">
        <el-form :model="role" ref="roleForm" :rules="rules" label-width="80px" :inline="true" size="small">
          <el-form-item label="角色编码" prop="roleCode">
            <el-input v-model="role.roleCode" placeholder="请输入角色编码" style="width: 350px"/>
          </el-form-item>
          <el-form-item label="角色名称" prop="roleName">
            <el-input v-model="role.roleName" placeholder="请输入角色名称" style="width: 350px"/>
          </el-form-item>
          <el-form-item label="角色描述">
            <el-input type="textarea" v-model="role.remark" :rows="5" style="width: 350px"/>
          </el-form-item>
        </el-form>
      </div>
    </system-dialog>
    <!--    分配权限树窗口-->
    <system-dialog :title="assignDialog.title" :visible="assignDialog.visible" :width="assignDialog.width"
                   :height="assignDialog.height" @onClose="onAssignDialogClose" @onConfirm="onAssignDialogConfirm">
      <div slot="content">
        <el-tree ref="assignTree" :data="assignTreeData" node-key="id" :props="defaultProps" empty-text="暂无数据"
                 :show-checkbox="true" :highlight-current="true" default-expand-all></el-tree>
      </div>
    </system-dialog>
  </el-main>
</template>

<script>
//导入roles.js脚本
import roleApi from "@/api/roles";
//导入对话框组件
import SystemDialog from "@/components/system/SystemDialog.vue";
//导入末级节点脚本
import leafUtils from "@/utils/leaf";
import hasPermission from "@/permission/index";

export default {
  name: "roleList",
  //注册组件
  components: {
    SystemDialog
  },
  data() {
    return {
      //查询条件
      searchModel: {
        roleName: '',//角色名称
        pageNo: 1,//当前页
        pageSize: 10,//每页显示条数
        userId: this.$store.getters.userId,//用户ID
      },
      roleList: [],//表格数据
      tableHeight: 0,//表格高度
      pageNo: 1,//当前页
      pageSize: 10,//每页显示条数
      total: 0,//总条数
      rules: {
        roleCode: [{required: true, message: '请输入角色编码', trigger: 'blur'}],
        roleName: [{required: true, message: '请输入角色名称', trigger: 'blur'}],
      },
      //添加和修改角色窗口属性
      roleDialog: {
        title: '',//对话框标题
        visible: false,//对话框是否显示
        width: 500,//对话框宽度
        height: 230,//对话框高度
      },
      //角色对象
      role: {
        id: '',//角色ID
        roleCode: '',//角色编码
        roleName: '',//角色名称
        remark: '',//角色备注
        createUser: this.$store.getters.userId,//创建人ID
      },
      //分配权限窗口属性
      assignDialog: {
        title: '',//对话框标题
        visible: false,//对话框是否显示
        width: 300,//对话框宽度
        height: 450,//对话框高度
      },
      roleId: '',//角色ID
      assignTreeData: [],//分配权限树数据
      //树节点属性
      defaultProps: {
        children: 'children',//子节点属性
        label: 'label',//节点名称属性
      }
    }
  },
  methods: {
    hasPermission,
    /**
     * 查询角色列表
     */
    async search(pageNo = 1, pageSize = 10) {
      this.searchModel.pageNo = pageNo;//当前页
      this.searchModel.pageSize = pageSize;//每页显示条数
      //发送查询请求
      let res = await roleApi.getRoleListApi(this.searchModel);
      //判断是否成功
      if (res.success) {
        this.roleList = res.data.records;//表格数据
        this.total = res.data.total;//总条数
      }
    },
    /**
     * 打开新增窗口
     */
    openAddWindow() {
      //清空表单数据
      this.$resetForm("roleForm", this.role);
      this.roleDialog.title = "新增角色";//设置对话框标题
      this.roleDialog.visible = true;//设置对话框是否显示
    },
    /**
     * 窗口关闭事件
     */
    onClose() {
      //关闭窗口
      this.roleDialog.visible = false;
    },
    /**
     * 窗口确认事件
     */
    onConfirm() {
      //表单验证
      this.$refs.roleForm.validate(async (valid) => {
        if (valid) {
          let res = null;
          //判断角色ID是否有数据，如果角色ID为空，则表示新增，否则就是修改
          if (this.role.id === "") {
            //发送新增角色请求
            res = await roleApi.addRoleApi(this.role);
          } else {
            //发送修改角色请求
            res = await roleApi.updateRoleApi(this.role);
          }
          //判断是否成功
          if (res.success) {
            this.$message.success(res.message);//提示成功
            await this.search(this.pageNo, this.pageSize);//刷新
            //关闭窗口
            this.roleDialog.visible = false;
          } else {
            this.$message.error(res.message);
          }
        }
      });
    },

    /**
     * 重置查询条件
     */
    resetValue() {
      //清空表单数据
      this.searchModel.roleName = "";
      //重新查询
      this.search();
    },
    /**
     * 改变每页显示条数触发
     * @param size
     */
    handleSizeChange(size) {
      this.pageSize = size;//每页显示条数
      this.search(this.pageNo, size);
    },
    /**
     * 改变页码触发
     * @param page
     */
    handleCurrentChange(page) {
      this.pageNo = page;//当前页
      this.search(page, this.pageSize);
    },
    /**
     * 编辑角色
     * @param row
     */
    handleEdit(row) {
      //数据回显
      this.$objCopy(row, this.role);//数据拷贝,将数据拷贝到role对象中
      this.roleDialog.title = "编辑角色";//设置对话框标题
      this.roleDialog.visible = true;//设置对话框是否显示
    },
    /**
     * 删除角色
     * @param row
     */
    async handleDelete(row) {
      //查询角色下是否存在用户
      let res = await roleApi.hasUserRoleCheck({roleId: row.id});
      //判断是否可以删除
      if (res.success) {
        this.$message.warning(res.message);//提示不能删除
      } else {
        //确认是否删除
        let confirm = await this.$myconfirm("确认删除该角色吗？");
        if (confirm) {
          //发送删除请求
          let res = await roleApi.deleteRoleApi({id: row.id});
          //判断是否成功
          if (res.success) {
            this.$message.success(res.message);//提示成功
            await this.search(this.pageNo, this.pageSize);//刷新
          } else {
            this.$message.error(res.message);
          }
        }
      }
    },
    /**
     * 分配权限
     * @param row
     */
    async assignRole(row) {
      //设置角色ID
      this.roleId = row.id;
      //构建参数
      let params = {
        roleId: row.id,
        userId: this.$store.getters.userId
      }
      //发送查询请求
      let res = await roleApi.getAssignTreeApi(params)
      //判断是否成功
      if (res.success) {
        //获取当前登录用户拥有的所有权限
        let {permissionList} = res.data;
        //获取当前登录用户拥有的所有权限信息
        let {checkList} = res.data;
        //判断当前菜单是否是末级
        let {setLeaf} = leafUtils();
        //设置权限菜单列表
        //设置树节点菜单数据
        this.assignTreeData = setLeaf(permissionList)
        //将回调延迟到下次DOM更新循环之后执行，在修改数据之后立即使用它，然后等待DOM更新。
        this.$nextTick(() => {
          //获取树菜单的节点数据
          let nodes = this.$refs.assignTree.children;
          //设置子节点
          this.setChild(nodes, checkList)
        })
      }
      //显示窗口
      this.assignDialog.visible = true;
      //设置窗口标题
      this.assignDialog.title = `给【${row.roleName}】分配权限`;
    },
    /**
     * 设置子节点
     * @param childNodes
     * @param checkList
     */
    setChild(childNodes, checkList) {
      //判断是否存在子节点
      if (childNodes && childNodes.length > 0) {
        //循环所有权限
        for (let i = 0; i < childNodes.length; i++) {
          //根据data或者key拿到Tree组件中的node
          let node = this.$refs.assignTree.getNode(childNodes[i])
          //判断是否已经拥有对应的角色权限数据
          if (checkList && checkList.length > 0) {
            //循环遍历已经有的权限数据
            for (let j = 0; j < checkList.length; j++) {
              //找到已经存在的菜单权限节点
              if (checkList[j] === childNodes[i].id) {
                //如果节点是展开状态，则将树节点选中
                if (!childNodes[i].open) {
                  this.$refs.assignTree.setChecked(node, true)
                  break
                }
              }
            }
          }
          //如果存在子节点，则递归选中
          if (childNodes[i].children) {
            this.setChild(childNodes[i].children, checkList)
          }
        }
      }
    },
    /**
     * 分配权限窗口取消事件
     */
    onAssignDialogClose() {
      this.assignDialog.visible = false;
    },
    /**
     * 分配权限窗口确认事件
     */
    async onAssignDialogConfirm() {
      //获取选中的节点key
      let ids = this.$refs.assignTree.getCheckedKeys()
      //获取选中节点的父节点id
      let pids = this.$refs.assignTree.getHalfCheckedKeys()
      //组装选中的节点ID数据
      let listId = ids.concat(pids)
      //组装参数
      let params = {
        roleId: this.roleId,
        list: listId
      }
      //发送请求
      let res = await roleApi.assignSaveApi(params)
      //判断是否成功
      if (res.success) {
        this.$message.success(res.message)//提示成功
        this.assignDialog.visible = false;//关闭窗口
      } else {
        this.$message.error(res.message)//提示失败
      }
    },
  },
  //初始化调用
  created() {
    //查询角色列表
    this.search();
  },
  //挂载后调用
  mounted() {
    this.$nextTick(() => {
      this.tableHeight = window.innerHeight - 200;
    });
  }
}
</script>

<style scoped>

</style>
